import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';
import { Icon } from 'antd';
import globalStyles from '../../style/common.less';
const modalRoot = document.getElementById('dialog-root');

class OverviewPanel extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('overview_panel');
    this.state = {
      chartOption: undefined,
      chartHeight: 200,
      currentCity:'上海',
      currentComprehensive:'100'
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.radarChartData !== this.props.radarChartData) {
      if (nextProps.radarChartData) {
        // this.setChartData(nextProps.dataList);
        console.log('radarChartData change')
        this.setChartData(nextProps.radarChartData);
      }
    }
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    // const { dataList } = this.props;
    const initChartData = {
      "id": "1",
      "city": "上海",
      "weekdayStream": "100 ",
      "weekendStream": "100",
      "stream": "100",
      "outboundInvest": "100",
      "externalFinancing": "100",
      "internalEconomy": "100 ",
      "economy": "100",
      "comprehensive": "100"
    };
    this.setChartData(initChartData);
  }

  setChartData(radarChartData) {
    const option = {
      tooltip: {},
      legend: {
        show: false,
        bottom: 15,
      },
      radar: [
        {
          indicator: [
            { text: '人气指数', max: 100 },
            { text: '商务活力', max: 100 },
            { text: '会展活力', max: 100 },
            { text: '交通活力', max: 100 },
            { text: '长三角融合', max: 100 }
          ],
          radius: 65,
          startAngle: 90,
          splitNumber: 4,
          shape: 'circle',
          name: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',
            }
          },
          splitArea: {
            areaStyle: {
              color: ['rgba(114, 172, 209, 0.1)',
                'rgba(114, 172, 209, 0.2)', 'rgba(114, 172, 209, 0.4)',
                'rgba(114, 172, 209, 0.5)', 'rgba(114, 172, 209, 1)'],
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 10
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)'
            }
          }
        }
      ],
      series: [
        {
          name: '雷达图',
          type: 'radar',
          itemStyle: {
            emphasis: {
              lineStyle: {
                width: 4,
              }
            }
          },
          data: [
            {
              value: [radarChartData.weekdayStream, radarChartData.weekendStream, radarChartData.outboundInvest, radarChartData.externalFinancing, radarChartData.internalEconomy],
              name: '虹桥人气活力指数',
              symbol: 'rect',
              symbolSize: 5,
              areaStyle: {
                normal: { // 单项区域填充样式
                  color: {
                    type: 'linear',
                    x: 0, //右
                    y: 0, //下
                    x2: 1, //左
                    y2: 1, //上
                    colorStops: [{
                      offset: 0,
                      color: '#00c2ff'
                    }, {
                      offset: 0.5,
                      color: 'rgba(0,0,0,0)'
                    }, {
                      offset: 1,
                      color: '#00c2ff'
                    }],
                    globalCoord: false
                  },
                  opacity: 1 // 区域透明度
                }
              },
              symbolSize: 2.5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
              label: {                    // 单个拐点文本的样式设置
                normal: {
                  show: false,             // 单个拐点文本的样式设置。[ default: false ]
                  position: 'top',        // 标签的位置。[ default: top ]
                  distance: 2,            // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                  color: '#fff',          // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                  fontSize: 12,           // 文字的字体大小
                  formatter: function (params) {
                    return params.value;
                  }
                }
              },
              itemStyle: {
                normal: { //图形悬浮效果
                  borderColor: '#00c2ff',
                  borderWidth: 2.5
                }
              },
              lineStyle: {
                normal: {
                  color: '#00feff',
                }
              }
            }
          ]
        }
      ]
    };
    this.setState({ chartOption: option,currentCity:radarChartData.city,currentComprehensive:radarChartData.comprehensive });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `虹桥人气活力指数（2019年6月）`;
    const { chartOption,currentCity,currentComprehensive } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
            {/* <Icon
              type="close"
              className={`${globalStyles.cursor_style_pointer}`}
              style={{ fontSize: 18 }}
              onClick={this.props.onClose}
            /> */}
          </div>
        </div>
        <div style={{ margin: '3px 8px 0px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
            {chartOption !== undefined && (
              <span
                style={{ fontSize: 16, marginLeft: 60, width: 300, float: 'left' }}
              >
                <span style={{fontWeight:"bold"}}>虹桥人气活力指数</span>&nbsp;&nbsp;&nbsp;
              <span style={{ fontSize: 16, fontWeight: 'bold', color: '#00feff', textShadow: '0px 0px 8px #00feff, 0px 0px 42px #00feff, 0px 0px 72px #00feff,0px 0px 150px #00feff' }}>
                  {currentComprehensive}
                </span>
              </span>
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}
export default OverviewPanel;
